<@override name="contest_content">
<div class="progress" id="contest-progress">
  <div class="bar" id="contest-bar" style="width:<#if (serverTime > contest.endTime)>100%</#if>"></div>
</div>
<#assign type="Private<sup>${contest.type}</sup>">
<#if contest.type==0>
<#assign type="Public">
</#if>
<h3 class="text-center">${type} Contest - ${contest.title!}</h3>
<div class="row text-center">
  <div class="span6 offset3">
    <#if adminUser??>
    <div class="contest-admin">
      <a href="contest/edit/${contest.cid!}?ajax=1" class="btn btn-primary" data-toggle="modal" data-target="#editModal">Edit</a> 
      <a href="contest/admin/${contest.cid!}" class="btn btn-primary">Manage</a>
    </div>
    </#if>
    <div class="well">
      <span>Start time</span>: <span class="time">${contest.startDateTime!}</span> 
      <span>End time</span>: <span class="time">${contest.endDateTime!}</span><br>
      <span>Current System Time</span>: <span class="time" id="current">${contest.startDateTime!}</span> 
      <span>Contest Status</span>: <span class="status ${status!}">${status!}</span>
    </div>
  </div>
</div>
<div class="row text-center">
  <div class="span6 offset3">
    <p>${contest.description!}</p>
  </div>
</div>

<div class="row">
  <div class="span8 offset2">
    <table id="problem-list" class="table table-hover table-condensed">
      <thead>
        <tr>
          <th></th>
          <th>Problem ID</th>
          <th>Title</th>
          <th>AC</th>
          <th>Submit</th>
        </tr>
      </thead>
      <tbody>
        <#if contestProblems??> 
        <#list contestProblems as Problem>
        <tr>
          <td class="result"><#if Problem.status??><i class="<#if Problem.status==0>oj-tick icon-ok<#else>oj-delete icon-remove</#if>"></i></#if>
          </td>
          <td class="pid">
            <#if adminUser??><a href="problem/show/${Problem.pid!}" target="_blank">${Problem.pid!}</a></#if>
            <a href="contest/problem/${contest.cid!}-${Problem.id!}" data-toggle="tooltip" title="${Problem.title!}">Problem ${Problem.id!}</a>
          </td>
          <td class="title"><a href="contest/problem/${contest.cid!}-${Problem.id!}">${Problem.title!}</a></td>
          <td class="accept"><a href="contest/status/${contest.cid!}?pid=${Problem.id!}&result=0">${Problem.accepted!}</a></td>
          <td class="submit"><a href="contest/status/${contest.cid!}?pid=${Problem.id!}">${Problem.submission!}</a></td>
        </tr>
        </#list> 
        </#if>
      </tbody>
    </table>
  </div>
</div>

<#if adminUser??>
<div class="modal hide fade contestModal" id="editModal">
  <form class="" action="contest/update" id="editContestForm" method="post">
    <div class="modal-header">
      <button class="close" aria-hidden="true" data-dismiss="modal" type="button">x</button>
      <h3 id="editModalLabel">
        Edit contest ${contest.cid!}:
        <a href="contest/edit/${contest.cid!}" title="Edit in another page" data-toggle="tooltip" data-placement="bottom">${contest.title!}</a>
      </h3>
    </div>
    <div class="modal-body">
      <a href="contest/edit/${contest.cid!}" class="btn btn-primary">Edit</a>
    </div>
    <div class="modal-footer">
      <button type="submit" class="btn btn-primary">Save</button>
      <button class="btn" data-dismiss="modal">Cancel</button>
    </div>
  </form>
</div>
</#if>
</@override>

<@override name="scripts">
<link href="assets/tablecloth/css/tablecloth.css" type="text/css" rel="stylesheet">
<script src="assets/tablecloth/js/jquery.metadata.js"></script>
<script src="assets/tablecloth/js/jquery.tablesorter.min.js"></script>
<script src="assets/tablecloth/js/jquery.tablecloth.js"></script>

<script type="text/javascript">
  $(document).ready(function() {
    var startTime = ${contest.startTime!0} * 1000;
    var endTime = ${contest.endTime!0} * 1000;
    var during_time = endTime - startTime;
    var current_time = ${serverTime!}*1000;
    function updateProgress() {
      if (current_time >= startTime && current_time <= endTime) {
        var percent = (current_time - startTime) / during_time * 100;
        $('#contest-bar').css('width', percent.toFixed(2) + '%');
      }
      $("#current").html(new Date(current_time).format("yyyy-MM-dd hh:mm:ss"));
      current_time+=1000;
    }
    setInterval(updateProgress, 1000);
    
    if (current_time >= startTime && current_time <= endTime) {
      $('#contest-progress').addClass('progress-danger progress-striped active');
    }
    
    <#if oj_style != "slate">
    $("#problem-list").tablecloth({
      theme:"stats",
      condensed:true,
      sortable:true,
      striped:true,
      clean:true
    });
    </#if>
});
</script>
</@override>
<@extends name="_layout.html" />
